<script setup lang="ts">
// 引入vue
import { reactive, ref } from "vue"
// 引入标题
import indexTitle from "./indexTitle.vue";
// 引入请求接口
import { getDutySituation } from "@/api/index"

// 定义类型
interface dataType {
    eegs_dutyContent: string,
    eegs_id?: number,
    eegs_name: string,
    eegs_phone: string,
    eegs_time: string
}
// 定义存储表格数据
const tableData = ref<dataType[]>([])
// 发起请求
getDutySituation().then(res => {
    // console.log(res);
    const result = res.data.data.result[0]
    // console.log(211, result);

    // 获取渲染表格的数据
    result.forEach((item: dataType) => {
        // console.log(Object.values(item));
        // 删除多余的数据
        delete item.eegs_id
        // 获取所有item的value值
        tableData.value.push(Object.values(item) as any)
    })
})

const config = reactive({
    header: ['姓名', '时间', '值班内容', '联系电话'],
    data: tableData.value,
    index: true,
    columnWidth: [50],
    rowNum: 3,
    align: ['center'],
    headerBGC: "",
})

const mouseoverHandler = (e: any) => {
    console.log(e)
}

const clickHandler = (e: any) => {
    console.log(e)
}
</script>



<template>
    <!-- 左下内容 -->
    <div class="left-bottom-container">
        <!-- 标题 -->
        <indexTitle title="值班情况" :show="true"></indexTitle>

        <!-- 表格内容 -->
        <div demo-bg class="table_conter">
            <dv-scroll-board :config="config" @mouseover="mouseoverHandler" @click="clickHandler" />
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-bottom-container {
    margin-top: 10px;
    width: 100%;
    height: 170px;


    .table_conter {
        width: 100%;
        height: calc(100% - 40px);
        overflow: hidden;
    }
}
</style>